<template>
	<view class="pageBox">
		<!--直播-->
		
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view
				class="cu-bar fixed bg-bgcolor"
				:style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
				}"
			>
				<view class="header-box">
					<image src="/static/images/add.png" 
					class="add-image"
					@tap="handleRelease"></image>
					
					<view class="header-item mr60" @click="changeTab(0)">
						<view :class="curTab=== 0 ? 'header-title-active ' : 'header-title'">关注</view>
						<view :class="curTab=== 0 ? 'header-line-active' : 'header-line'"></view>
					</view>
					<view class="header-item mr60" @click="changeTab(1)">
						<view :class="curTab=== 1 ? 'header-title-active' : 'header-title'">直播</view>
						<view :class="curTab=== 1 ? 'header-line-active' : 'header-line'"></view>
					</view>
					<view class="header-item" @click="changeTab(2)">
						<view :class="curTab=== 2 ? 'header-title-active' : 'header-title'">视频</view>
						<view :class="curTab=== 2 ? 'header-line-active' : 'header-line'"></view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="category-box">
			<view v-for="(item, index) in categoryList" :key="index"
			:class="curCategory===item.id ? 'category-item-active mr60' : 'category-item mr60'" 
			@click="changeCategory(item.id)">
				<view>{{item.name || ''}}</view>
			</view>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index"
			@click="jump(item)"
			>
				<image :src="item.image" class="bg-iamge"></image>
				<view class="bottom-box">
					<view class="flex align-center">
						<image :src="item.avatar" class="list-avatar"></image>
						<view class="list-title">{{item.nickname || ''}}</view>
					</view>
					<view class="hot-box">
						<image src="/static/images/hot.png" class="hot-image"></image>
						<view class="hot-num">{{item.pv || 0}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- #ifdef H5 -->
		<view class="seat"></view>
		<!-- #endif -->
		
	</view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
import { mapState, mapActions } from 'vuex';
	
export default {
	components: {
		
	},
	data() {
		return {
			statusBarHeight: systemInfo.statusBarHeight,
			curTab:1,
			curCategory:0,
			categoryList:[], //分类列表
			
			dataList:[],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		
	},
	onShow(){
		//获取视频分类
		this.getCategory();
	},
	// 触底加载更多
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.getList();
		}
	},
	computed: {
		...mapState(['common'])
	},
	methods: {
		getCategory(){
			let that = this;
			uni.request({
				url: '/live/typelist',
				data: {
					page: that.current_page
				},
				success: res => {
					this.categoryList = res.data;
					this.curCategory = res.data.length > 0 ? res.data[0].id : 0;
					
					this.curTab = 1;
					this.dataList = [];
					this.current_page = 1;
					this.getList();
				}
			});
		},
		getList() {
			let that = this;
			this.status = 'loading';
			uni.request({
				url: '/live/livelist',
				data: {
					page: this.current_page,
					type_id: this.curCategory,
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						that.dataList = [...that.dataList, ...res.data.data];
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						that.status = 'more';
					}
				}
			});
		},
		changeTab(type){
			this.curTab = type;	
			if(type === 0){
				uni.navigateTo({
					url:'/pages/new/video-focus-list'
				})
				
				return false;
			}

			if(type === 2){
				uni.navigateTo({
					url:'/pages/new/video-list'
				})
				
				return false;
			}
		},
		changeCategory(type){
			this.curCategory = type;
			
			this.curTab = 1;
			this.dataList = [];
			this.current_page = 1;
			this.getList();
		},
		// 点击发布
		handleRelease(){
			if(this.$store.state.user.isLogin){
				let itemList = [], url = [];
				itemList = ['发布短视频', '发布直播'];
				url = ['/pages/new/find/video', '/pages/new/live/live'];
			
				uni.showActionSheet({
				    itemList: itemList,
				    success: res => {
						if(res.tapIndex === 1){
							// #ifdef APP-PLUS || MP-WEIXIN
							uni.navigateTo({
								url: url[res.tapIndex]
							})
							// #endif
							
							// #ifndef APP-PLUS || MP-WEIXIN
							uni.showToast({
							    title: '目前只开放App和微信小程序直播',
							    icon:'none'
							});
							// #endif
						}else{
							uni.navigateTo({
								url: url[res.tapIndex]
							})
						}
				    }
				});
				
			}else{
				this.$wanlshop.to('/pages/user/auth/auth');
			}
		},
		jump(item){
			uni.setStorageSync('liveData', item);
			
			uni.navigateTo({
				url: '/pages/new/live/play?id='+item.id,
			})
		}
	}
}
</script>


<style>
page{
	background-color: #ffffff !important;
}
</style>

<style scoped lang="scss">
.header-box{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 60rpx;
	margin-bottom: 20rpx;
	width: 100%;
	position: relative;
	
	/*#ifdef MP-WEIXIN*/
	margin-top: 0rpx !important;
	/*#endif*/
	
	.add-image{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: 32rpx;
		top: -4rpx;
	}
	
	.header-item{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.header-title{
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #87888A;
		line-height: 40rpx;
	}
	
	.header-title-active{
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #111111;
		line-height: 40rpx;
	}
	
	.header-line{
		width: 32rpx;
		height: 6rpx;
		background: rgba(255,255,255,0);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin-top: 10rpx;
	}
	
	.header-line-active{
		width: 32rpx;
		height: 6rpx;
		background: #9C3728;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin-top: 10rpx;
	}
	
	.mr60{
		margin-right: 60rpx;
	}
}


.category-box{
	display: flex;
	align-items: center;
	margin-top: 42rpx;
	padding: 0rpx 32rpx;
	
	/*#ifdef MP-WEIXIN*/
	margin-top: 10rpx !important;
	/*#endif*/
	
	.category-item-active{
		width: 200rpx;
		height: 48rpx;
		background: rgba(156,55,40,0.08);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #9C3728;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.category-item{
		width: 200rpx;
		height: 48rpx;
		background: #F6F7F9;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666867;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.mr60{
		margin-right: 60rpx;
	}
}

.list{
	padding: 20rpx 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	
	.list-item{
		width: 336rpx;
		position: relative;
		margin-bottom: 14rpx;
	}
	
	.bg-iamge{
		width: 336rpx;
		height: 406rpx;
		border-radius: 20rpx;
	}
	
	.bottom-box{
		// position: absolute;
		// bottom: 22rpx;
		padding: 0rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	
	.list-avatar{
		width: 60rpx;
		height: 60rpx;
		border-radius:50%;
		margin-right:10rpx;
	}
	
	.list-title{
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		color: #918e8e;
		line-height: 35rpx;
	}
	
	.hot-box{
		min-width: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 10rpx;
		// background: rgba(0,0,0,0.35);
		// border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
	
	.hot-image{
		width: 28rpx;
		height: 28rpx;
		margin-right:10rpx;
	}
	
	.hot-num{
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		color: #918e8e;
		line-height: 23rpx;
	}
}

.seat{
	width: 750rpx;
	height: 100rpx;
}


</style>